﻿<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>DistSQL Plan Viewer</title>
    <style>
        @import url(style.css);
    </style>
</head>
<body onload="init(data)">
<script src="d3.v3.js"></script>
<script src="cola.min.js"></script>
<script src="pako_inflate.min.js"></script>

<script src="flow_diagram.js"></script>

<script>

  var hash = window.location.hash;
  var compressed = window.location.hash;
  if (window.location.hash.length <= 1) {
    compressed = window.location.search
  }

  compressed = compressed.substring(1, compressed.length)

  // Decode base64 (convert ascii to binary).
  var strData = atob(compressed.replace(/-/g, '+').replace(/_/g, '/'));

  // Convert binary string to character-number array
  var charData = strData.split('').map(function(x){return x.charCodeAt(0);});

  // Turn number array into byte-array
  var binData = new Uint8Array(charData);

  // Pako magic
  var data = pako.inflate(binData);

  var strData = new TextDecoder("utf-8").decode(data)
  // console.log(strData)

  var data = JSON.parse(strData);
</script>

<br/>
Scroll up/down to scale. Drag to pan or move nodes.
<button type="button" id="sqlbutton" class="sqlbutton">Show SQL</button>
<button class="redirect" href="#" onclick="window.open('/altdistsqlplan/index.html' + window.location.hash, '_self');return false;">Heatmap and Layered Graph View</button>
<textarea class="sqltext" id="sqltext" readonly rows=8 wrap=soft></textarea>
       
<script>
  if (data.sql) {
    var button = document.getElementById("sqlbutton");
    var text = document.getElementById("sqltext");

    // Show the button and set up a listener that opens or closes the textarea.
    button.style.display = "inline";
    text.value = data.sql;

    button.addEventListener("click", function() {
      this.classList.toggle("active");
      if (text.style.display === "block") {
        vMargin -= 120;
        resize();
        button.innerHTML = "Show SQL";
        text.style.display = "none";
      } else {
        vMargin += 120;
        resize();
        button.innerHTML = "Hide SQL";
        text.style.display = "block";
      }
    });
  }
</script>
</body>
</html>
